<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> html component CRUD </title>
</head>
<body>

<div id="div_i1"></div>
<div class="div_c1"></div>

<select name="sp.eq.trans_type" id="transType">
    <option value="">请选择</option>
    <option value="微信支付">微信支付</option>
    <option value="支付宝支付">支付宝支付</option>
    <option value="消费">消费</option>
    <option value="扫码预消费完成">扫码预消费完成</option>
    <option value="预授权完成">预授权完成</option>
    <option value="银联扫码">银联扫码</option>
    <option value="扫码支付">扫码支付</option>
    <option value="代收">代收</option>
    <option value="代付">代付</option>
</select>


<p id="p1"> 这是文本。 </p>

<input type="button" value="getElementById" onclick="findById()"> |
<input type="button" value="getElementsByTagName" onclick="findByTagName('div')"> |
<input type="button" value="changeElement" onclick="changeElement()"> |
<input type="button" value="hide" onclick="hideElement()"> |
<input type="button" value="show" onclick="showElement()">

<script>
    function findById() {
        let selector = document.getElementById("transType");
        selector.options.length = 0;
        selector.options.add(new Option("请选择", "1"));
        selector.options.add(new Option("别选择", "2"));

    }


    function findByTagName(tagName) {

        for (const htmlElement of document.getElementsByTagName(tagName)) {
            console.log(typeof htmlElement);
            console.log(htmlElement);
        }
    }


    function changeElement() {

        let opt = document.createElement('option');
        opt.value = 1;
        opt.innerHTML = "caonima";

        let doc = document.getElementById("transType");
        doc.options.length = 0;
        doc.appendChild(opt);

    }


    function hideElement() {
        document.getElementById('p1').style.visibility = 'hidden';
    }


    function showElement() {
        document.getElementById('p1').style.visibility = 'visible';
    }


</script>
</body>
</html>
